<template>
  <view
    class="stars"
    @mouseenter="onMouseEnter"
    @mousemove="onMouseMove"
    @mouseup="onMouseUp"
    :id="id"
  >
    <view class="item" v-for="(item, index) in _stars" :key="index">
      <image
        class="icon"
        :style="item.fillStyle"
        src="https://rhws.oss-cn-chengdu.aliyuncs.com/icon_v2/xing.png"
      ></image>
      <image
        class="icon_hui"
        :style="item.style"
        src="https://rhws.oss-cn-chengdu.aliyuncs.com/icon_v2/xing_hui.png"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    score: {
      type: Number,
      default: 4.8,
    },
    size: {
      type: Number,
      default: 15,
    },
    id: {
      default: "d_" + Math.round(Math.random() * 10000 * 10000) + "_star",
    },
  },
  computed: {
    _stars() {
      let score = this.score;
      if (score > 5) {
        score = 5;
      }
      let size = this.size;
      let arr = [];

      while (score > 0) {
        let percent = score > 1 ? 100 : score * 100;
        let x = (size / 100) * percent * 2;

        arr.push({
          score,
          percent,
          fillStyle: `clip: rect(0 ${x}rpx ${size * 2}rpx 0)`,
          style: `clip: rect(0 ${size * 2}rpx ${size * 2}rpx ${x}rpx)`,
        });
        score--;
      }
      return arr;
    },
  },
  methods: {
    onMouseEnter(e) {
      //   console.log(e);
    },
    onMouseMove(e) {
      //   console.log(e);
    },
    onMouseUp(e) {
      //   console.log(e);
    },
  },
  mounted() {
    const query = (this.query = uni.createSelectorQuery().in(this));
    query
      .select("#" + this.id)
      .boundingClientRect((data) => {
        console.log(data, "?data");
      })
      .exec();
  },
};
</script>

<style lang="stylus" scoped>
.stars {
  background: '';

  >.item {
    position: relative;
    display: inline-block;
    width: 30rpx;
    height: 30rpx;
    overflow: hidden;
    margin-right: 4rpx;

    >.left, .right {
      position: absolute;
      z-index: 3;
      width: 30rpx;
      height: 30rpx;
      left: 0;
      top: 0;
      background: #FFF;
    }
  }

  .icon, .icon_hui {
    position: absolute;
    display: block;
    width: 30rpx;
    height: 30rpx;
  }

  .icon_hui {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 30rpx;
    height: 30rpx;
    background-repeat: no-repeat;
    background-size: 30rpx 30rpx;
  }
}
</style>